<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>表单元素</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/layuiadmin/style/admin.css" media="all">
    <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div th:each="pro:${page.records}" class="layui-col-md3" style="margin: 0px">
            <div class="layui-carousel" th:id="test+${pro.id}">
                <div carousel-item="">
                    <div th:each="img:${pro.imgs}" >
                        <img height="100%" width="100%" th:src="${img.path}" >
                    </div>
                </div>
            </div>
            <p style="margin-top: 8px;font-weight: 600;font-size: 16px;margin-bottom: 6px"> 款式: <span th:text="${pro.name}"></span></p>
            <p style="font-size: 16px;margin-bottom: 6px"> 编码: <span th:text="${pro.productNumber}"></span></p>
            <p>
            <div class="layui-btn-group">
            <button type="button" class="layui-btn" style="width: 84px" th:onclick="'find('+${pro.id}+')'">查看</button>
            <button type="button" class="layui-btn" style="width: 84px" th:onclick="'editClo('+${pro.id}+')'">编辑</button>
            <button type="button" class="layui-btn" style="width: 84px" th:onclick="'deleteClo('+${pro.id}+')'">删除</button>
            </div>
            </p>

        </div>
    </div>
</div>
<!--编辑弹框-->
<div class="layui-form" id="editUserDialog" style="display: none;padding: 20px;padding-right: 50px;">
    <div class="layui-form-item">
        <label class="layui-form-label" style="left: -10px">ID</label>
        <div class="layui-input-block">
            <input type="text" id="editId" name="title" lay-verify="title" autocomplete="off" placeholder="请输入ID" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" style="left: -10px">款式</label>
        <div class="layui-input-block">
            <input type="text" id="editName" name="title" lay-verify="title" autocomplete="off" placeholder="请输入款式" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" style="left: -10px">编码</label>
        <div class="layui-input-block">
            <input type="text" id="editCode" name="title" lay-verify="title" autocomplete="off" placeholder="请输入编码" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" style="left: -10px">适用性别</label>
        <div class="layui-input-block">
            <select name="interest" id="editRoleId" lay-filter="aihao">
                <option value="1">男</option>
                <option value="2">女</option>
                <option value="3">男女皆宜</option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="button" class="layui-btn layui-btn-primary" id="cancelBtn">取消</button>
            <button type="button" class="layui-btn" lay-submit="" id="subBtn" lay-filter="demo1">立即提交</button>
        </div>
    </div>
</div>
<!--图片窗口-->
<div class="layui-form" id="findImage" style="display: none;padding: 20px;padding-right: 50px;">
    <img id="image" height="100%" width="100%" src="">
</div>
<script type="text/html" id="roleName">
<!--    用一个变量d表示正在被遍历的对象-->
    {{d.roleId == 0?'男':(d.roleId==1?'男、女':(d.roleId==2?'女'))}}
</script>

<script src="/layuiadmin/layui/layui.js"></script>
<script th:inline="javascript">
    // 点击取消
    $('#cancelBtn').click(function () {
        // 关闭弹框
        layer.closeAll()
    })

    // 点击提交
    $('#subBtn').click(function () {
        $.ajax({
            type: 'post',
            url: '/product/update',
            data: {
                id: $("#editId").val(),
                name:  $("#editName").val(),
                productNumber: $("#editCode").val()
                // roleId: $("#editRoleId").val(),
            },
            success: function (res) {
                    layer.msg('编辑成功', {
                        icon: 1,
                        time: 1500
                    }, function () {
                        // 关闭弹框
                        layer.closeAll()
                        // 刷新页面
                        location='/product/productList'
                    });
            }
        })
    })

    // 点击查看
    function find(data) {
        console.log(data);
        data--;
        $.ajax({
            type: 'get',
            url: '/productImage/'+data,
            success: function (res) {
                console.log(res.data)
                console.log(res.data.path)
                // 给弹框内容赋值
                $("#image").attr("src",res.data.path);
                // $("#image").val(res.data.path)
                // 打开弹框
                layer.open({
                    type: 1,
                    area: '500px',
                    title: '查看款式',
                    content: $("#findImage")
                })

            }
        })
        // console.log(productNumber);
    }

    // 点击编辑
    function editClo(data) {
        console.log(data);
        $.ajax({
            type: 'get',
            url: '/product/'+data,
            success: function (res) {
                console.log(res.data.name)
                // 给弹框内容赋值
                $("#editId").val(res.data.id)
                $("#editName").val(res.data.name)
                $("#editCode").val(res.data.productNumber)
                // 打开弹框
                layer.open({
                    type: 1,
                    area: '500px',
                    title: '编辑款式',
                    content: $("#editUserDialog")
                })

            }
        })
        // console.log(productNumber);

    }
    layui.config({
        base: '/layuiadmin/' //静态资源所在路径
    }).extend({
        index: '/lib/index' //主入口模块
    }).use(['index','laydate','upload','layedit','carousel', 'table','form'], function(){
        var $ = layui.$
            ,layedit=layui.layedit
            ,upload=layui.upload
            ,admin = layui.admin
            ,element = layui.element
            ,laydate = layui.laydate
            ,carousel=layui.carousel
            ,form = layui.form
            ,table = layui.table;

        table.render({
            elem: '#test-table-toolbar'
            ,url: '/product/productList',
            parseData: function(res){ //res 即为原始返回的数据
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.message, //解析提示文本
                    "count": res.data.total, //解析数据长度
                    "data": res.data.records //解析数据列表
                };
            }
            ,toolbar: '#test-table-toolbar-toolbarDemo'
            ,title: '寒衣表'
            ,cols: [
                [
                    {type: 'checkbox', fixed: 'left'}
                    ,{field:'name', title:'学号/工号'}
                    ,{field:'productNumber', title:'用户名'}
                    ,{field:'gender', title:'适用范围', templet: '#roleName'}
                ]
            ]
            ,page: true
        });
        table.reload('test-table-toolbar', {
            url: '/whitelistSetting/list'
            ,where: {
                sn: $("#querySn").val(),
                name: $("#queryName").val(),
                roleId: $("#queryRoleId").val()
            } //设定异步数据接口的额外参数
        });


        $([[${page.records}]]).each(function (index,item) {
            carousel.render({
                elem: '#test'+item.id
                ,arrow: 'hover'
                ,width:'250px'
                ,indicator:'none'
            });
        })
    });

    // 点击删除
    function deleteClo(data) {
        layer.confirm('确认删除该衣服吗?', {icon: 3, title:'提示'}, function(index){
            $.ajax({
                type: 'get',
                url: '/product/removeById?id='+data,
                success: function (res) {
                    layer.msg('删除成功', {
                        icon: 1,
                        time: 1500
                    }, function () {
                        //重新刷新
                        location='/product/productList'
                    });

                }
            })
        },function () {

        });
    }

</script>
</body>
</html>